<template>
    <div>
        <el-card>
            <el-row :gutter="10">
                <div class="search_input">
                    <el-col :span="6">
                        <el-select v-model="queryInfo.review_project_id" size="small" style="width: 100%" clearable
                                   placeholder="请选择所属项目" @change="projectChange" @clear="projectClear">
                            <el-option
                                    v-for="(item) in searchProjectData"
                                    :key="item.id"
                                    :label="item.title"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-select v-model="queryInfo.new_sample_id" :disabled="sampleDisable" size="small"
                                   ref="sampleRef" style="width: 100%"
                                   clearable
                                   placeholder="请选择样本点">
                            <el-option
                                    v-for="(item) in searchSampleData"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-select v-model="queryInfo.community_id" :disabled="sampleDisable" size="small"
                                   ref="sampleRef" style="width: 100%"
                                   clearable
                                   placeholder="请选择社区">
                            <el-option
                                    v-for="(item) in searchCommunityData"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-select v-model="queryInfo.review_status" size="small" style="width: 100%" clearable
                                   placeholder="请输入复查状态">
                            <el-option
                                    v-for="(item,index) in reviewStatusData"
                                    :key="index"
                                    :label="item"
                                    :value="index">
                            </el-option>
                        </el-select>
                    </el-col>
                </div>
                <div class="search_input" v-show="showSearch">
                    <el-col :span="6">
                        <el-select v-model="queryInfo.audit_status" size="small" style="width: 100%" clearable
                                   placeholder="请输入审核状态">
                            <el-option
                                    v-for="(item,index) in auditStatusData"
                                    :key="index"
                                    :label="item"
                                    :value="index">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-select v-model="queryInfo.audit_result" size="small" style="width: 100%" clearable
                                   placeholder="请输入审核结果">
                            <el-option
                                    v-for="(item,index) in auditResultData"
                                    :key="index"
                                    :label="item"
                                    :value="index">
                            </el-option>
                        </el-select>
                    </el-col>
<!--                    <el-col :span="6">-->
<!--                        <el-input size="small" placeholder="请选择审核人"></el-input>-->
<!--                    </el-col>-->
                </div>
                <el-col :span="20">
                    <el-button type="primary" size="small" @click="SearchList">搜索</el-button>
                    <el-button type="info" size="small" @click="resetSearch">重置</el-button>
                    <el-button type="text" style="margin-left:10px" id="closeSearchBtn" @click="closeSearch">
                        {{ word }}
                        <i :class="showAll ? 'el-icon-arrow-up ': 'el-icon-arrow-down'"></i>
                    </el-button>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="20">
                    <el-tooltip effect="dark" content="刷新" placement="top" :enterable="false">
                        <el-button type="primary" size="small" :icon="icon" @click="getReviewCaseList"></el-button>
                    </el-tooltip>
                    <el-button type="primary" size="small" v-has="'admin/save_review_case'" @click="addCaseForm">新增</el-button>
                </el-col>
            </el-row>
            <el-table :data="reviewCaseData" border stripe v-loading="loading"
                      element-loading-text="拼命加载中...."
                      size="small"
                      element-loading-spinner="el-icon-loading">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="id" label="ID"></el-table-column>
                <el-table-column prop="sample.name" label="样本点"></el-table-column>
                <el-table-column prop="remark" label="描述"></el-table-column>
<!--                <el-table-column prop="project.title" label="所属项目"></el-table-column>-->
                <el-table-column label="所属社区">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.sample.communities.length === 1 ? 'success' : 'danger'">{{
                                scope.row.sample.communities.length === 1 ? scope.row.sample.communities[0].name : '暂未分配'
                            }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="复查状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.review_status === 1" type="info">暂未复查</el-tag>
                        <el-tag v-else-if="scope.row.review_status === 2" type="success">已复查</el-tag>
                        <el-tag v-else type="danger">复查不合格</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="审核状态">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.audit_status === 2 ? 'success' : 'danger'">
                            {{
                                scope.row.audit_status === 2 ? '已审核' : '暂未审核'
                            }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="审核结果">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.audit_result === 0 ">暂无结果</el-tag>
                        <el-tag v-else-if="scope.row.audit_result === 1" type="success">已整改</el-tag>
                        <el-tag v-else-if="scope.row.audit_result === 2" type="info">未整改</el-tag>
                        <el-tag v-else-if="scope.row.audit_result === 3" type="warning">反弹</el-tag>
                        <el-tag v-else type="danger">不合格</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="review_time" label="复查时间"></el-table-column>
                <el-table-column label="操作" width="250">
                    <template slot-scope="scope">
                        <el-tooltip effect="dark" :content="scope.row.audit_status === 1 ? '审核' : '查看' " placement="top"
                                    :enterable="false">
                            <el-button type="success" icon="el-icon-success" size="mini"
                                       v-if="scope.row.audit_status === 1"
                                       @click="auditStatusCase(scope.row)"></el-button>
                            <el-button type="warning" icon="el-icon-picture-outline-round"  @click="checkCase(scope.row)"
                                       size="mini" v-else></el-button>
                        </el-tooltip>
<!--                        <el-tooltip effect="dark" content="编辑" placement="top"  :enterable="false">-->
<!--                            <el-button type="primary" icon="el-icon-edit" size="mini"-->
<!--                                       @click="editCase(scope.row)"></el-button>-->
<!--                        </el-tooltip>-->
                        <el-tooltip effect="dark" content="删除"  placement="top" :enterable="false">
                            <el-button type="danger" icon="el-icon-delete" size="mini"
                                       @click="delCase(scope.row.id)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.page"
                    :page-sizes="[10, 20, 30, 40,50]"
                    :page-size="queryInfo.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
        <!-- 审核结果 -->
        <el-dialog
                title="审核"
                :visible.sync="AuditDialogVisible"
                width="50%" @close="closeDialog">

            <audit-form :caseArr="caseData" @saveAuditResult="saveAuditResult" :unReason="unReasonShow" :auditResult="auditResultData"
                        ref="audit"></audit-form>
        </el-dialog>
        <!-- 查看 -->
        <el-dialog
                title="查看"
                :visible.sync="CheckDialogVisible">

            <check-form ref="checkCase" :checkCase="checkCaseData" :unReasonShow="unReasonShow"></check-form>
        </el-dialog>
        <!-- 新增 -->
        <el-dialog
                :title="title"
                :visible.sync="AddDialogVisible" @close="addCloseDialog">

            <add-form ref="addCase" :projectArr="searchProjectData" :selectTypeData="selectTypeData" :projectTargetData="projectTargetData"  @saveCase="saveCase"></add-form>
        </el-dialog>
        <el-dialog
                title="编辑案件"
                :visible.sync="EditDialogVisible" @close="editCloseDialog">

            <edit-form ref="editCase" :projectArr="searchProjectData" @saveEditCase="saveEditCase" :auditResult="auditResultData" :dataArr="editFormData"></edit-form>
        </el-dialog>
    </div>
</template>

<script>
import auditForm from '@/components/auditForm'
import checkForm from '@/components/checkForm'
import addForm from '@/components/addCaseForm'
import editForm from '@/components/editCaseForm'

let _this;
export default {
    name: "index",
    components: {
        auditForm, checkForm, addForm, editForm
    },
    data() {
        return {
            unReasonShow:false,
            AddDialogVisible: false,
            EditDialogVisible: false,
            CheckDialogVisible: false,
            AuditDialogVisible: false,
            showAll: true,
            showSearch: false,
            icon: 'el-icon-refresh',
            dialogVisible: false, //新增and编辑弹出层
            syncDialogVisible: false, //同步数据弹出层
            loading: true,
            SelectLoading: false,
            title: '',
            btnLoading: false,
            selectTypeData: [],
            projectTargetData:[],
            //初始化条条件
            queryInfo: {
                community_id: '',
                review_project_id: '',
                review_status: '',
                audit_status: '',
                audit_result: '',
                new_sample_id: '',
                limit: this.$global_limit,
                page: this.$global_page
            },
            //总数
            total: 0,
            //数据源
            reviewCaseData: [],
            //提交表单
            projectForm: {
                id: 0,
                title: ''
            },
            sampleDisable: true,
            //认证
            projectRules: {
                title: [
                    {required: true, message: '请输入项目名称', trigger: 'blur'},
                ],
            },
            syncForm: {
                sync_project_id: ''
            },
            syncRules: {
                sync_project_id: [
                    {required: true, message: '请选择项目', trigger: 'change'}
                ],
            },
            syncProjectList: [],
            review_id: 0,
            reviewStatusData: [],
            auditStatusData: [],
            auditResultData: [],
            searchProjectData: [],
            searchSampleData: [],
            searchCommunityData: [],
            //审核表单
            caseData: [],
            childArr: [],
            case_id: '',
            checkCaseData: [],
            editFormData: []

        }
    },
    created() {
        _this = this
        //缓存
        _this.queryInfo.page = _this.common.getContextData('session_page') || 1
        _this.queryInfo.community_id = (_this.common.getContextData('community_id')) || ''
        _this.queryInfo.review_status =  (_this.common.getContextData('review_status')) || ''
        _this.queryInfo.audit_status = (_this.common.getContextData('audit_status')) || ''
        _this.queryInfo.audit_result = (_this.common.getContextData('audit_result')) || ''
        _this.queryInfo.new_sample_id =  (_this.common.getContextData('new_sample_id')) || ''
        //复查案件列表
        _this.getReviewCaseList()
        //复查状态读取
        _this.getReviewStatus()
        //审核状态读取
        _this.getAuditStatus()
        //审核结果读取
        _this.getAuditResult()
        //获取搜索项目列表
        _this.getSearchProject()
        //社区
        _this.getCaseCommunity()
        _this.getSelectTypeList()
        _this.getProjectTargetList()
    },
    // 页面渲染后调用
    mounted() {
        _this.$nextTick(function () {
            _this.closeSearch()
        })
    },
    methods: {
        //分配社区读取select
        async getSelectTypeList() {
            const {data: res} = await this.$http.get('admin/get_select_type')
            if (res.code !== 200) return this.$message.error('获取社区列表失败')
            this.selectTypeData = res.data.list
        },

        //项目指标读取select
        async getProjectTargetList() {
            const {data: res} = await this.$http.get('admin/get_project_target_type')
            if (res.code !== 200) return this.$message.error('获取社区列表失败')
            this.projectTargetData = res.data.list
        },
        //复查状态
        async getReviewStatus() {
            const {data: res} = await _this.$http.get('admin/review_status')
            if (res.code !== 200) return _this.$message.error('获取复查状态失败')
            _this.reviewStatusData = res.data.list;
        },
        //审核状态
        async getAuditStatus() {
            const {data: res} = await _this.$http.get('admin/audit_status')
            if (res.code !== 200) return _this.$message.error('获取审核状态失败')
            _this.auditStatusData = res.data.list;
        },
        //审核结果
        async getAuditResult() {
            const {data: res} = await _this.$http.get('admin/audit_result')
            if (res.code !== 200) return _this.$message.error('获取审核结果失败')
            _this.auditResultData = res.data.list;
        },
        //搜索项目
        async getSearchProject() {
            const {data: res} = await _this.$http.get('admin/search_project')
            if (res.code !== 200) return _this.$message.error('获取项目失败')
            _this.searchProjectData = res.data.list;
        },

        //复查案件列表
        async getReviewCaseList() {
            const {data: res} = await _this.$http.get('admin/review_case_list', {params: _this.queryInfo})
            if (res.code !== 200) return _this.$message.error('获取数据失败')
            _this.reviewCaseData = res.data.list;
            _this.total = res.data.totalCount
            _this.loading = false
        },
        // 搜索框的展开和关闭
        closeSearch() {
            _this.showAll = !_this.showAll
            if (_this.showAll === false) {
                _this.showSearch = false
            } else {
                _this.showSearch = true
            }
        },
        handleSizeChange(newSize) {
            _this.queryInfo.limit = newSize
            _this.loading = true
            _this.getReviewCaseList()
        },
        handleCurrentChange(newPage) {
            _this.queryInfo.page = newPage
            _this.common.setContextData('session_page', newPage)
            _this.getReviewCaseList()
        },

        //重置
        resetForm(formName) {
            _this.$refs[formName].resetFields();
        },
        //项目下拉选择
        projectChange(e) {
            if (e) {
                _this.getCaseSample(e)
            }
        },
        projectClear() {
            _this.searchSampleData = []
            _this.queryInfo.new_sample_id = ''
            _this.queryInfo.community_id = ''
            _this.sampleDisable = true
        },
        //根据项目选择对应的样本点
        async getCaseSample(e) {
            const {data: res} = await _this.$http.get(`admin/search_sample/${e}`)
            if (res.code !== 200) {
                _this.searchSampleData = []
                _this.queryInfo.new_sample_id = ''
                _this.queryInfo.community_id = ''
                _this.sampleDisable = true
                return _this.$message.error(res.data.message)
            }
            _this.sampleDisable = false
            _this.searchSampleData = res.data.list;
        },
        //获取社区
        async getCaseCommunity() {
            const {data: res} = await _this.$http.get('admin/search_community')
            if (res.code !== 200) return _this.$message.error('获取社区失败')
            _this.searchCommunityData = res.data.list;
        },
        // 搜索
        SearchList() {
            _this.queryInfo.page = 1
            _this.loading = true
            _this.common.setContextData('review_project_id', _this.queryInfo.review_project_id)
            _this.common.setContextData('community_id', _this.queryInfo.community_id)
            _this.common.setContextData('review_status', _this.queryInfo.review_status)
            _this.common.setContextData('audit_status', _this.queryInfo.audit_status)
            _this.common.setContextData('audit_result', _this.queryInfo.audit_result)
            _this.common.setContextData('new_sample_id', _this.queryInfo.new_sample_id)
            _this.getReviewCaseList()
        },
        // 重置搜索
        resetSearch() {
            _this.queryInfo.community_id = ''
            _this.queryInfo.review_project_id = ''
            _this.queryInfo.review_status = ''
            _this.queryInfo.audit_status = ''
            _this.queryInfo.audit_result = ''
            _this.queryInfo.new_sample_id = ''
            _this.getReviewCaseList()
        },
        //审核
        async auditStatusCase(row) {
            const {data: res} = await _this.$http.get(`admin/read_case/${row.id}`)
            if (res.code !== 200) return _this.$message.error(res.data.message)
            _this.caseData = res.data.list
            _this.case_id = row.id
            _this.AuditDialogVisible = true
        },
        //保存审核结果
        saveAuditResult: async (childValue) => {
            const params = {
                audit_result: childValue.audit_result,
                id: _this.case_id,
                unReason:childValue.unReason
            }
            const {data: res} = await _this.$http.post('admin/save_audit_result', params)
            if (res.code !== 200) return _this.$message.error(res.data.message)
            _this.AuditDialogVisible = false
            await _this.getReviewCaseList()

        },
        //清空子组件的表单
        closeDialog() {
            _this.$refs.audit && _this.$refs.audit.clearForm()
        },
        //查看案件详情
        async checkCase(row) {
            const {data: res} = await _this.$http.get(`admin/read_case/${row.id}`)
            if (res.code !== 200) return _this.$message.error(res.data.message)
            _this.checkCaseData = res.data.list
            _this.CheckDialogVisible = true
        },
        //删除案件
        async delCase(id) {
            const configResult = await _this.$confirm('此操作将永久删除该案件吗, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err);
            if (configResult !== 'confirm') return _this.$message.info('已取消删除')
            const {data: result} = await _this.$http.get('admin/del_case/' + id)
            if (result.code !== 200) return _this.$message.error(result.data.message)
            _this.$message.success('删除成功')

            //删除成功后页码改变返还为上一页
            let totalPage = Math.ceil((_this.total - 1) / _this.queryInfo.limit);
            let currentPage = _this.queryInfo.page > totalPage ? totalPage : _this.queryInfo.page;
            _this.queryInfo.page = _this.queryInfo.page < 1 ? 1 : currentPage;

            await _this.getReviewCaseList();
        },
        //新增案件打开Dialog
        addCaseForm() {
            _this.title = '新增案件'
            _this.AddDialogVisible = true
        },
        //新增案件结果
        saveCase: async (childValue) => {
            const {data: res} = await _this.$http.post('admin/save_review_case', childValue)
            if (res.code !== 200) return _this.$message.error(res.data.message)
            _this.AddDialogVisible = false
            _this.$refs.addCase && _this.$refs.addCase.clearForm()
            await _this.getReviewCaseList()
        },
        addCloseDialog() {
            _this.$refs.addCase && _this.$refs.addCase.clearForm()
        },
        editCase(row) {
            _this.editFormData = row
            _this.EditDialogVisible = true

        },
        saveEditCase: async (childValue) => {
            const {data: res} = await _this.$http.post('admin/save_edit_review_case', childValue)
            if (res.code !== 200) return _this.$message.error(res.data.message)
            _this.EditDialogVisible = false
            await _this.getReviewCaseList()
        },
        editCloseDialog() {

        }
    },
    // 计算属性
    computed: {
        word: function () {
            if (this.showAll === false) {
                //对文字进行处理
                return '展开'
            } else {
                return '收起'
            }
        }
    }
}
</script>

<style scoped>
.ivu-inline-block .ivu-dropdown {
    display: inline-block;
}

.i-link-color, .i-link-color:active, .i-link-color:hover {
    color: inherit;
}

.i-link {
    cursor: pointer;
}

.ivu-fr {
    float: right;
}

.ivu-dropdown-rel {
    position: relative;
}

.ivu-ml {
    margin-right: 16px !important;
}

.ivu-tooltip, .ivu-tooltip-rel {
    display: inline-block;
}

.ivu-tooltip-rel {
    position: relative;
    width: inherit;
}

.el-row {
    margin-bottom: 20px;

}

.prompt {
    background: white;
    width: 100px;
    height: 30px;
    text-align: center;
}

.el-row:last-child {
    margin-bottom: 0;
}


.search-box {
    position: absolute;
    top: 25px;
    left: 120px;
}

.previewImg {
    width: 30%;
}

.amap-page-container {
    position: relative;
}

.search_input .el-col {
    margin-bottom: 10px;
}

#searchBox {
    overflow: hidden;
}

.el-cascader {
    line-height: normal;
}

.inline-block {
    margin-left: 10px;
    display: inline-block;
}

.amap-demo {
    height: 300px;
}
</style>
